<template>
  <div>
    <h2>商品列表</h2>
    <div class="product" v-for="product in products" :key="product.product_id">
      <img :src="product.photo" alt="" />
      <h3>{{ product.product_name }}</h3>
      <p>{{ product.description }}</p>
      <p>单位: {{ product.unit }}</p>
      <button @click="addToCart(product.product_id)">加入购物车</button>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: 'ProductList',
  data() {
    return {
      products: []
    };
  },
  methods: {
    addToCart(productId) {
      alert(`商品 ${productId} 已加入购物车`);
    }
  },
  mounted() {
    request.get('/products')
      .then(res => this.products = res.data)
      .catch(err => console.error(err));
  }
}
</script>
